<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col>
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="AddItem">
                                    <a-icon class="btns-icon" type="file-add" />
                                    <div class="btns-text">新增</div>
                                </div>
                            </a-col>
                            <!-- <a-col :class="planId!=1?'':'btns-disable'" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="planId!=1?savePlan():''">
                                    <a-icon class="btns-icon" type="save" />
                                    <div class="btns-text">保存</div>
                                </div>
                            </a-col> -->
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="edit">
                                    <a-icon class="btns-icon" type="edit" />
                                    <div class="btns-text">修改</div>
                                </div>
                            </a-col>
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="deleteFun">
                                    <a-icon class="btns-icon" type="delete" />
                                    <div class="btns-text">删除</div>
                                </div>
                            </a-col>
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="disabledFun">
                                    <a-icon class="btns-icon" type="disconnect" />
                                    <div class="btns-text">禁用</div>
                                </div>
                            </a-col>
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="enableFun">
                                    <a-icon class="btns-icon" type="check-circle" />
                                    <div class="btns-text">启用</div>
                                </div>
                            </a-col>
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="PageList">
                                    <a-icon class="btns-icon" type="file-search" />
                                    <div class="btns-text">查询</div>
                                </div>
                            </a-col>
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="reset">
                                    <a-icon class="btns-icon" type="undo" />
                                    <div class="btns-text">重置</div>
                                </div>
                            </a-col>
                            <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                                <div class="btns" @click="showFunction">
                                    <a-icon class="btns-icon" type="folder-open" />
                                    <div class="btns-text">{{ show ? "折叠" : "展开" }}</div>
                                </div>
                            </a-col>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <!--内容-->
            <div>
                <nly-row class="ml-1 mb-2 lr mt-4" v-show="show">
                    <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="form-inline " style="justify-content: left;font-size:12px;">
                        <form-input title="字典名称" id="name" labelStyle="" rightStyle="width:120px;" class="ml-2" v-show="show" v-model="postData.dictName"></form-input>
                        <form-input title="字典类型" id="name" labelStyle="" rightStyle="width:120px;" class="ml-2" v-show="show" v-model="postData.dictType"></form-input>
                        <form-select title="系统字典" class="ml-2" rightStyle="width:120px;" v-show="show" v-model="postData.isSys" :dataList="[{ key: 1, title: '是' },{ key: 0, title: '否' }]">
                        </form-select>
                        <form-select title="状态" class="ml-2" rightStyle="width:120px;" v-show="show" v-model="postData.status" :dataList="[{ key: 0, title: '正常' },{ key: 2, title: '停用' }]">
                        </form-select>
                    </nly-col>
                </nly-row>
            </div>
            <section class="content-dicttype" style="padding:10px;">
                <!-- 列表 -->
                <a-table :columns="columns" :components="components" :data-source="data" :scroll="{ y: 500}" bordered :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnWidth:35 }">
                    <template slot="o" slot-scope="text,row">
                        <div>
                            <div class="row justify-content-md-center">
                                <span class="col"></span>
                                <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                                    <!-- <a href="javascript:;" title="编辑" class="mr-1 col-1" @click="showModal(row)">
                                        <i class="fa fa-edit" style="color: #69aa46;"></i>
                                    </a>
                                    <a v-if="row.status == 2" href="javascript:;" title="启用" class="mr-1 col-1" @click="Enable(row)">
                                        <i class="fa fa-check-circle" style="color: #69aa46;"></i>
                                    </a>
                                    <a v-if="row.status != 2" href="javascript:;" title="禁用" class="mr-1 col-1" @click="Disable(row)">
                                        <i class="fas fa-ban" style="color: #dd5a43;"></i>
                                    </a>
                                    <a href="javascript:;" title="删除" class="mr-1 col-1" @click="DeleteItem(row)">
                                        <i class="fa fa-trash-alt" style="color: #dd5a43;"></i>
                                    </a> -->
                                    <a href="javascript:;" title="字典数据" class="mr-1 col-1" @click="goTo(row)">
                                        <i class="fa fa-align-justify"></i>
                                    </a>
                                </span>
                                <span class="col"></span>
                            </div>
                        </div>
                    </template>
                </a-table>
            </section>
        </div>

        <!-- <nly-content-wrapper>
            <nly-content-header>
                <nly-row class="col-12 ">
                    <nly-row class="col-12 list-header">
                        <nly-col xs="12" sm="12" md="12" lg="9" xl="9" class="form-inline " style="justify-content: left;">
                            <i :class="this.$route.meta.icon + ' text-info'" class="icon" /><span s>{{this.$route.name}}</span>
                        </nly-col>
                        <nly-col xs="12" sm="12" md="12" lg="3" xl="3" class="form-inline align-self-start" style="justify-content: right;">
                            <nly-button-group>
                                <nly-button variant="info" @click="PageList" button-class="mr-2">查询</nly-button>
                                <nly-button variant="info" button-class="mr-2" @click="reset">重置</nly-button>
                                <nly-button variant="info" @click="AddItem" button-class="mr-2">添加</nly-button>
                                <nly-button @click="showFunction" variant="info" button-class="mr-2">
                                    <i :class="show ? 'fas fa-angle-down mr-1' : 'fas fa-angle-up mr-1'" />{{ show ? "折叠" : "展开" }}
                                </nly-button>
                            </nly-button-group>
                        </nly-col>
                    </nly-row>

                </nly-row>
                <nly-container fluid>
                </nly-container>
            </nly-content-header>
            <div class="tabpanel_tab_spacer"></div>
            <nly-content>

            </nly-content>
        </nly-content-wrapper> -->

        <!-- modal 弹窗  -->
        <a-modal :visible="editModal" lg :footer="null" :title="editItem.id ? '编辑' : '新增'" size="xxl" @cancel="hideModal">
            <div class="form-inline mb-2">

                <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="margin-top-10">
                    <form-input title="字典名称" rightClass="col" v-model="editItem.dictName" labelStyle=""></form-input>
                </nly-col>
                <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="margin-top-10">
                    <form-input title="字典类型" rightClass="col" v-model="editItem.dictType" labelStyle=""></form-input>
                </nly-col>
                <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="margin-top-10">
                    <form-input title="应用模块" rightClass="col" v-model="editItem.moduleType" labelStyle=""></form-input>
                </nly-col>
                <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="margin-top-10">
                    <form-radio title="系统字典" rightClass="col" v-model="editItem.isSys" :dataList="[{ key: true, title: '是' },{ key: false, title: '否' }]"></form-radio>
                </nly-col>

            </div>

            <div class="form-inline mb-2">
                <nly-col>
                    <!-- FormTextArea -->
                    <form-text-area title="备注信息" rightClass="col" v-model="editItem.remarks"></form-text-area>
                </nly-col>
            </div>

            <nly-row style="justify-content: flex-end;">
                <nly-button class="mt-3 mr-3" @click="onSubmit" variant="info">保存</nly-button>
                <nly-button class="mt-3" variant="outlineDanger" @click="hideModal">关闭</nly-button>
            </nly-row>
        </a-modal>
    </div>
</template>

<script>
import {
    FormInput,
    FormRadio,
    FormSelect,
    FormTextArea
} from "@/components/Form";

import { typeList, typeSave, typeDelete, typeEnable, typeDisable } from "@/api/dictType";

import { listToMap } from "@/utils/tool/map";
import { components } from "@/utils/antTableComponents";

const basePostData = {
    "page.current": 1,
    "page.size": 1000,
    dictName: "",
    dictType: "",
    isSys: null,
    status: null,
    moduleType: "",
};
export default {
    components: {
        FormInput,
        FormRadio,
        FormSelect,
        FormTextArea
    },
    data () {
        const columns = [
            {
                title: "字典名称",
                dataIndex: "dictName",
                key: "dictName",
                width: 120,
                customRender: (text, row, index) => {
                    return (
                        <span>
                            <a href="javascript:;" onClick={() => this.showModal(row)}>
                                {text}
                            </a>
                        </span>
                    );
                }
            },
            {
                title: "字典类型",
                dataIndex: "dictType",
                key: "dictType",
                width: 120,
                customRender: (text, row, index) => {
                    return (
                        <span>
                            <a href="javascript:;" onClick={() => this.goTo(row)}>
                                {text}
                            </a>
                        </span>
                    );
                }
            },
            {
                title: "系统字典",
                dataIndex: "isSys",
                key: "isSys",
                width: 120,
                customRender: (text, row, index) => {
                    return text ? "是" : <span style="color:#aaa;">否</span>;
                }
            },
            {
                title: "更新时间",
                dataIndex: "createDate",
                key: "createDate",
                width: 80
            },
            {
                title: "应用模块",
                dataIndex: "moduleType",
                key: "moduleType",
                width: 120
            },
            {
                title: "备注",
                dataIndex: "remarks",
                key: "remarks",
                width: 120
            },
            {
                title: "状态",
                dataIndex: "status",
                key: "status",
                width: 120,
                customRender: (text, row, index) => {
                    return text == 2 ? (
                        <nly-badge bg-variant="danger">停用</nly-badge>
                    ) : (
                        <nly-badge bg-variant="success">正常</nly-badge>
                    );
                }
            },
            {
                title: "操作",
                dataIndex: "o",
                width: 50,
                key: "o",
                scopedSlots: { customRender: 'o' },
            }
        ];

        const breadcrumbItem = [
            {
                text: "首页",
                to: "/",
                icon: "nlyfont nly-icon-home-fill"
            },
            {
                text: "系统管理",
                to: "/system"
            },
            {
                text: "字典管理",
                to: "/system/dictType/list",
                active: true
            }
        ];

        //表格 头部 可伸缩
        this.components = components(columns);
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            selectedRowKeys: [],
            selectedRows: [],
            postData: { ...basePostData },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
            pagination: {
                defaultPageSize: 10,
                current: 1,
                pageSize: 10,
                total: 0,
                showTotal: total => `共 ${total} 条数据`,
                showSizeChanger: true,
                showQuickJumper: true,
                pageSizeOptions: ["10", "20", "30", "40", "50"],
                showLessItems: true
            },
            breadcrumbItem, //导航栏
            show: false, //是否显示
            editItem: {}, //新增/编辑对象
            editModal: false,
        };
    },
    mounted () {
        this.PageList();
    },
    computed: {},
    methods: {
        //添加
        AddItem () {
            this.editItem = {};
            this.editModal = true;
        },
        //删除
        DeleteItem (menu) {
            let _this = this;
            this.$confirm({
                title: '提示',
                content: '您确定要删除该字典吗？',
                onOk () {
                    keyDelete({ id: menu.id })
                        .then(response => {
                            if (response.code === 200) {
                                _this.$message.success("删除成功");
                                //刷新 列表
                                _this.PageList();
                            }
                        });
                },
                onCancel () {
                },
            });
        },
        // 获取列表
        PageList () {
            const { postData } = this;
            typeList(postData).then(response => {
                console.log("获取字典类型列表", response);
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records.map(v => {
                        return { ...v, key: v.id }
                    });


                    Object.assign(this.pagination, {
                        total
                    });
                }
            })
                .catch(error => { });
        },
        Disable (item) {
            typeDisable({ id: item.id }).then(response => {
                if (response.code === 200) {
                    this.$message.success("禁用成功");
                    //刷新 列表
                    this.PageList();
                }
            })

        },
        onSelectChange (keys, rows) {
            console.log(keys, rows)
            this.selectedRowKeys = keys;
            this.selectedRows = rows;
        },
        edit () {
            //修改
            console.log('tag', this.selectedRowKeys.length)
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('选择一条数据');
                return;
            }
            this.editItem = { ...this.selectedRows[0] };
            this.editModal = true;
        },
        deleteFun () {
            //删除
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('选择一条数据');
                return;
            }
            this.DeleteItem(this.selectedRows[0])
        },
        disabledFun () {
            //禁用
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('选择一条数据');
                return;
            }
            this.Disable(this.selectedRows[0])
        },
        enableFun () {
            //启用
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('选择一条数据');
                return;
            }
            this.Enable(this.selectedRows[0])
        },
        Enable (item) {
            typeEnable({ id: item.id }).then(response => {
                if (response.code === 200) {
                    this.$message.success("启用成功");
                    //刷新 列表
                    this.PageList();
                }
            })

        },
        //获取
        showFunction () {
            this.show = !this.show;
        },
        showModal (editItem) {
            console.log("editItem", editItem);
            this.editItem = { ...editItem };
            this.editModal = true;
        },
        hideModal () {
            this.editModal = false;
        },
        onSubmit () {
            //todo 检查数据格式（延迟处理）

            if (!this.editItem.dictName) {
                this.$message.warn('请输入字典名称');
                return false;
            }

            if (!this.editItem.dictType) {
                this.$message.warn('请输入字典类型');
                return false;
            }
            if (typeof this.editItem.isSys == 'undefined') {
                this.$message.warn('请选择是否是系统字段');
                return false;
            }

            typeSave(this.editItem).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功");
                    this.selectedRowKeys = [];
                    this.selectedRows = [];
                    //刷新 列表
                    this.PageList();
                    this.hideModal();
                }
            }).catch(res => {

            })

        },
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                "page.current": pagination.current,
                "page.size": pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.PageList();
        },
        reset () {
            this.postData = { ...basePostData };
        },
        goTo (dictType) {
            // this.$router.push({path:url});
            this.$router.push(`/system/dictData/list/${dictType.id}/${dictType.dictName}:${dictType.dictType}`)
        }
    },
};
</script>
<style lang="less">
    .content-dicttype {
        height: 100%;
        overflow-y: auto;
    }
    @import '~@/style/purchase/voucher.less';
    /* .form-inline > label {
                  justify-content: right !important;
                }
                .ant-radio-group > label{
                   justify-content: left !important;
                }
                .ant-checkbox-group >label{
                   justify-content: left !important;
                }
                .form-inline > .col {
                  margin-bottom: 1.5rem !important;
                } */
</style>
